<section><h1>Icon 图标</h1>
  <h3>主要图标</h3>
  <ul class="at-icon-list row">
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-activity"></i>
        <p>icon-activity</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-airplay"></i>
        <p>icon-airplay</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-alert-circle"></i>
        <p>icon-alert-circle</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-alert-octagon"></i>
        <p>icon-alert-octagon</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-alert-triangle"></i>
        <p>icon-alert-triangle</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-align-center"></i>
        <p>icon-align-center</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-align-justify"></i>
        <p>icon-align-justify</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-align-left"></i>
        <p>icon-align-left</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-align-right"></i>
        <p>icon-align-right</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-anchor"></i>
        <p>icon-anchor</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-at-sign"></i>
        <p>icon-at-sign</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-award"></i>
        <p>icon-award</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-bar-chart-2"></i>
        <p>icon-bar-chart-2</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-bar-chart"></i>
        <p>icon-bar-chart</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-battery-charging"></i>
        <p>icon-battery-charging</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-battery"></i>
        <p>icon-battery</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-bell-off"></i>
        <p>icon-bell-off</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-bell"></i>
        <p>icon-bell</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-bluetooth"></i>
        <p>icon-bluetooth</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-book"></i>
        <p>icon-book</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-bookmark"></i>
        <p>icon-bookmark</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-box"></i>
        <p>icon-box</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-briefcase"></i>
        <p>icon-briefcase</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-calendar"></i>
        <p>icon-calendar</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-cast"></i>
        <p>icon-cast</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-check-circle"></i>
        <p>icon-check-circle</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-check-square"></i>
        <p>icon-check-square</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-check"></i>
        <p>icon-check</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-circle"></i>
        <p>icon-circle</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-clipboard"></i>
        <p>icon-clipboard</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-clock"></i>
        <p>icon-clock</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-cloud-off"></i>
        <p>icon-cloud-off</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-cloud"></i>
        <p>icon-cloud</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-command"></i>
        <p>icon-command</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-copy"></i>
        <p>icon-copy</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-cpu"></i>
        <p>icon-cpu</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-credit-card"></i>
        <p>icon-credit-card</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-delete"></i>
        <p>icon-delete</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-disc"></i>
        <p>icon-disc</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-download-cloud"></i>
        <p>icon-download-cloud</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-download"></i>
        <p>icon-download</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-edit-2"></i>
        <p>icon-edit-2</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-edit-1"></i>
        <p>icon-edit-1</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-edit"></i>
        <p>icon-edit</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-external-link"></i>
        <p>icon-external-link</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-eye-off"></i>
        <p>icon-eye-off</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-eye"></i>
        <p>icon-eye</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-feather"></i>
        <p>icon-feather</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-file-minus"></i>
        <p>icon-file-minus</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-file-plus"></i>
        <p>icon-file-plus</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-file-text"></i>
        <p>icon-file-text</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-file"></i>
        <p>icon-file</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-filter"></i>
        <p>icon-filter</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-flag"></i>
        <p>icon-flag</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-folder"></i>
        <p>icon-folder</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-grid"></i>
        <p>icon-grid</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-hash"></i>
        <p>icon-hash</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-headphones"></i>
        <p>icon-headphones</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-heart"></i>
        <p>icon-heart</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-home"></i>
        <p>icon-home</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-inbox"></i>
        <p>icon-inbox</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-info"></i>
        <p>icon-info</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-layers"></i>
        <p>icon-layers</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-layout"></i>
        <p>icon-layout</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-life-buoy"></i>
        <p>icon-life-buoy</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-link-2"></i>
        <p>icon-link-2</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-link"></i>
        <p>icon-link</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-list"></i>
        <p>icon-list</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-loader"></i>
        <p>icon-loader</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-lock"></i>
        <p>icon-lock</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-log-in"></i>
        <p>icon-log-in</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-log-out"></i>
        <p>icon-log-out</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-maximize-2"></i>
        <p>icon-maximize-2</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-maximize"></i>
        <p>icon-maximize</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-menu"></i>
        <p>icon-menu</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-mic-off"></i>
        <p>icon-mic-off</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-mic"></i>
        <p>icon-mic</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-minimize-2"></i>
        <p>icon-minimize-2</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-minus-circle"></i>
        <p>icon-minus-circle</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-minus-square"></i>
        <p>icon-minus-square</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-minus"></i>
        <p>icon-minus</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-monitor"></i>
        <p>icon-monitor</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-more-horizontal"></i>
        <p>icon-more-horizontal</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-more-vertical"></i>
        <p>icon-more-vertical</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-move"></i>
        <p>icon-move</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-music"></i>
        <p>icon-music</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-octagon"></i>
        <p>icon-octagon</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-package"></i>
        <p>icon-package</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-percent"></i>
        <p>icon-percent</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-pie-chart"></i>
        <p>icon-pie-chart</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-plus-circle"></i>
        <p>icon-plus-circle</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-plus-square"></i>
        <p>icon-plus-square</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-plus"></i>
        <p>icon-plus</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-power"></i>
        <p>icon-power</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-printer"></i>
        <p>icon-printer</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-radio"></i>
        <p>icon-radio</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-refresh-ccw"></i>
        <p>icon-refresh-ccw</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-refresh-cw"></i>
        <p>icon-refresh-cw</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-rotate-ccw"></i>
        <p>icon-rotate-ccw</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-rotate-cw"></i>
        <p>icon-rotate-cw</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-save"></i>
        <p>icon-save</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-scissors"></i>
        <p>icon-scissors</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-search"></i>
        <p>icon-search</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-server"></i>
        <p>icon-server</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-settings"></i>
        <p>icon-settings</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-share-2"></i>
        <p>icon-share-2</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-share"></i>
        <p>icon-share</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-shield"></i>
        <p>icon-shield</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-sidebar"></i>
        <p>icon-sidebar</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-slash"></i>
        <p>icon-slash</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-smartphone"></i>
        <p>icon-smartphone</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-speaker"></i>
        <p>icon-speaker</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-square"></i>
        <p>icon-square</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-star"></i>
        <p>icon-star</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-tablet"></i>
        <p>icon-tablet</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-tag"></i>
        <p>icon-tag</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-target"></i>
        <p>icon-target</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-thumbs-down"></i>
        <p>icon-thumbs-down</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-thumbs-up"></i>
        <p>icon-thumbs-up</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-toggle-left"></i>
        <p>icon-toggle-left</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-toggle-right"></i>
        <p>icon-toggle-right</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-trash-2"></i>
        <p>icon-trash-2</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-trash"></i>
        <p>icon-trash</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-trending-down"></i>
        <p>icon-trending-down</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-trending-up"></i>
        <p>icon-trending-up</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-triangle"></i>
        <p>icon-triangle</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-type"></i>
        <p>icon-type</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-unlock"></i>
        <p>icon-unlock</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-upload-cloud"></i>
        <p>icon-upload-cloud</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-upload"></i>
        <p>icon-upload</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-user-check"></i>
        <p>icon-user-check</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-user-minus"></i>
        <p>icon-user-minus</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-user-plus"></i>
        <p>icon-user-plus</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-user-x"></i>
        <p>icon-user-x</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-user"></i>
        <p>icon-user</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-users"></i>
        <p>icon-users</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-watch"></i>
        <p>icon-watch</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-wifi"></i>
        <p>icon-wifi</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-x-circle"></i>
        <p>icon-x-circle</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-x-square"></i>
        <p>icon-x-square</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-x"></i>
        <p>icon-x</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-zap"></i>
        <p>icon-zap</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-zoom-in"></i>
        <p>icon-zoom-in</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-zoom-out"></i>
        <p>icon-zoom-out</p></div>
    </li>
  </ul>
  <hr>
  <h3>媒体控制</h3>
  <ul class="at-icon-list row">
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-fast-forward"></i>
        <p>icon-fast-forward</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-pause-circle"></i>
        <p>icon-pause-circle</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-pause"></i>
        <p>icon-pause</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-play-circle"></i>
        <p>icon-play-circle</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-play"></i>
        <p>icon-play</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-repeat"></i>
        <p>icon-repeat</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-rewind"></i>
        <p>icon-rewind</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-shuffle"></i>
        <p>icon-shuffle</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-skip-back"></i>
        <p>icon-skip-back</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-skip-forward"></i>
        <p>icon-skip-forward</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-stop-circle"></i>
        <p>icon-stop-circle</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-volume-1"></i>
        <p>icon-volume-1</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-volume-2"></i>
        <p>icon-volume-2</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-volume-x"></i>
        <p>icon-volume-x</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-volume"></i>
        <p>icon-volume</p></div>
    </li>
  </ul>
  <hr>
  <h3>
    通信
  </h3>
  <ul class="at-icon-list row">
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-mail"></i>
        <p>icon-mail</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-message-circle"></i>
        <p>icon-message-circle</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-message-square"></i>
        <p>icon-message-square</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-phone-call"></i>
        <p>icon-phone-call</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-phone-forwarded"></i>
        <p>icon-phone-forwarded</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-phone-incoming"></i>
        <p>icon-phone-incoming</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-phone-missed"></i>
        <p>icon-phone-missed</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-phone-off"></i>
        <p>icon-phone-off</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-phone-outgoing"></i>
        <p>icon-phone-outgoing</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-phone"></i>
        <p>icon-phone</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-voicemail"></i>
        <p>icon-voicemail</p></div>
    </li>
  </ul>
  <hr>
  <h3>照片</h3>
  <ul class="at-icon-list row">
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-aperture"></i>
        <p>icon-aperture</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-camera-off"></i>
        <p>icon-camera-off</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-camera"></i>
        <p>icon-camera</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-film"></i>
        <p>icon-film</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-image"></i>
        <p>icon-image</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-video-off"></i>
        <p>icon-video-off</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-video"></i>
        <p>icon-video</p></div>
    </li>
  </ul>
  <hr>
  <h3>地理位置</h3>
  <ul class="at-icon-list row">
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-compass"></i>
        <p>icon-compass</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-crosshair"></i>
        <p>icon-crosshair</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-globe"></i>
        <p>icon-globe</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-map-pin"></i>
        <p>icon-map-pin</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-map"></i>
        <p>icon-map</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-navigation-2"></i>
        <p>icon-navigation-2</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-navigation"></i>
        <p>icon-navigation</p></div>
    </li>
  </ul>
  <hr>
  <h3>天气</h3>
  <ul class="at-icon-list row">
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-cloud-drizzle"></i>
        <p>icon-cloud-drizzle</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-cloud-lightning"></i>
        <p>icon-cloud-lightning</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-cloud-rain"></i>
        <p>icon-cloud-rain</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-cloud-snow"></i>
        <p>icon-cloud-snow</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-droplet"></i>
        <p>icon-droplet</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-moon"></i>
        <p>icon-moon</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-sun"></i>
        <p>icon-sun</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-sunrise"></i>
        <p>icon-sunrise</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-sunset"></i>
        <p>icon-sunset</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-thermometer"></i>
        <p>icon-thermometer</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-umbrella"></i>
        <p>icon-umbrella</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-wind"></i>
        <p>icon-wind</p></div>
    </li>
  </ul>
  <hr>
  <h3>箭头</h3>
  <ul class="at-icon-list row">
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-arrow-down-left"></i>
        <p>icon-arrow-down-left</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-arrow-down-right"></i>
        <p>icon-arrow-down-right</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-arrow-down"></i>
        <p>icon-arrow-down</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-arrow-left"></i>
        <p>icon-arrow-left</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-arrow-right"></i>
        <p>icon-arrow-right</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-arrow-up-left"></i>
        <p>icon-arrow-up-left</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-arrow-up-right"></i>
        <p>icon-arrow-up-right</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-arrow-up"></i>
        <p>icon-arrow-up</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-chevron-down"></i>
        <p>icon-chevron-down</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-chevron-left"></i>
        <p>icon-chevron-left</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-chevron-right"></i>
        <p>icon-chevron-right</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-chevron-up"></i>
        <p>icon-chevron-up</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-chevrons-down"></i>
        <p>icon-chevrons-down</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-chevrons-left"></i>
        <p>icon-chevrons-left</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-chevrons-right"></i>
        <p>icon-chevrons-right</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-chevrons-up"></i>
        <p>icon-chevrons-up</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-corner-down-left"></i>
        <p>icon-corner-down-left</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-corner-down-right"></i>
        <p>icon-corner-down-right</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-corner-left-down"></i>
        <p>icon-corner-left-down</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-corner-left-up"></i>
        <p>icon-corner-left-up</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-corner-right-down"></i>
        <p>icon-corner-right-down</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-corner-right-up"></i>
        <p>icon-corner-right-up</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-corner-up-left"></i>
        <p>icon-corner-up-left</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-corner-up-right"></i>
        <p>icon-corner-up-right</p></div>
    </li>
  </ul>
  <hr>
  <h3>LOGO</h3>
  <ul class="at-icon-list row">
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-chrome"></i>
        <p>icon-chrome</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-codepen"></i>
        <p>icon-codepen</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-facebook"></i>
        <p>icon-facebook</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-github"></i>
        <p>icon-github</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-instagram"></i>
        <p>icon-instagram</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-pocket"></i>
        <p>icon-pocket</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-slack"></i>
        <p>icon-slack</p></div>
    </li>
    <li class="at-icon-list__item col-sm-6 col-md-4 col-lg-3 flex flex-middle flex-center">
      <div><i class="icon icon-twitter"></i>
        <p>icon-twitter</p></div>
    </li>
  </ul>
</section>
